<script lang="ts" setup>
	//选择售后方式
	import { reactive, ref } from "vue";
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	let router = useRouter()
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	let itemObj = ref(null)
	let id = ref()
	onLoad((option) => {
		itemObj.value = JSON.parse(option.item)
		console.log(JSON.parse(option.item));
		id.value = option.id
	})
	const routerLink = (e, type) => {
		router.push({
			name: e,
			params: {
				type: type,
				item: encodeURIComponent(JSON.stringify(itemObj.value)),
				id: id.value
			}
		})
	}
</script>
<template>
	<view class="boxAll" v-if="itemObj!=null">
		<view class="con">
			<image class="conL" :src="itemObj.sku!=null?itemObj.sku.logo:itemObj.info.image" mode=""></image>
			<view class="conR">
				<view class="rl c-flex-center-start">
					<text class="u-line-1" style="font-size: 28rpx;font-weight: 500;">{{ itemObj.productName }}</text>
					<text
						style="font-size: 24rpx;color: rgba(0,0,0,0.45);padding-left: 32rpx;margin-top: 14rpx;">规格：{{ itemObj.sku!=null?itemObj.sku.specIdsName:'' }}</text>
				</view>
				<view class="rr">
					<text class="intFont"><text style="font-size: 20rpx;">￥</text> {{ itemObj.price }}</text>
					<text>×{{ itemObj.cartNum }}</text>
				</view>
			</view>
		</view>
	</view>
	<view class="way r-flex-between-center" @click="routerLink('applyForAfterSale',0)">
		<!-- <image src="../../../static/logo.png" mode=""></image> -->
		<view class="c-flex-center-start wCenter">
			<text>仅退款</text>
			<text>未收到货，或与客服协商同意不用退货之退款</text>
		</view>
		<u-icon name="arrow-right"></u-icon>
	</view>
	<view class="way r-flex-between-center" @click="routerLink('applyForAfterSale',1)">
		<!-- <image src="../../../static/logo.png" mode=""></image> -->
		<view class="c-flex-center-start wCenter">
			<text>退货退款</text>
			<text>已收到货，需要退还收到的货物</text>
		</view>
		<u-icon name="arrow-right"></u-icon>
	</view>
</template>
<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	.boxAll {
		box-sizing: border-box;
		margin: 32rpx auto;
		width: 686rpx;
		height: 240rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 32rpx;

		.con {
			width: 100%;
			height: 176rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			.conL {
				width: 176rpx;
				height: 176rpx;
			}

			.conR {
				width: 426rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.rl {
					width: 338rpx;
					font-size: 28rpx;
				}

				.rr {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;
					font-size: 28rpx;
				}
			}
		}

	}

	.way {
		box-sizing: border-box;
		width: 686rpx;
		height: 160rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 32rpx auto;
		padding: 32rpx;



		// image {
		// 	width: 100rpx;
		// 	height: 100rpx;
		// 	border-radius: 50rpx;
		// }

		.wCenter {
			width: 530rpx;
			font-size: 26rpx;

			text:nth-child(1) {
				font-size: 32rpx;
				font-weight: 600;
				color: rgba(0, 0, 0, 0.85);
			}

			text:nth-child(2) {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.45);
				margin-top: 16rpx;
			}
		}
	}
</style>